<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 标题 -->
        <div slot="header" class="clearfix">
          <span>{{ $route.query.id ? "试题修改" : "试题录入" }}</span>
        </div>

        <!-- 表单 -->
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <!-- 学科  -->
          <el-form-item label="学科: " prop="subjectID">
            <el-select
              style="width: 400px"
              v-model="form.subjectID"
              placeholder="请选择"
              @change="sujectIDChangeFn"
            >
              <el-option
                v-for="item in subjectIDList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 目录  -->
          <el-form-item label="目录: " prop="catalogID">
            <el-select
              style="width: 400px"
              v-model="form.catalogID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 企业  -->
          <el-form-item label="企业: " prop="enterpriseID">
            <el-select
              style="width: 400px"
              v-model="form.enterpriseID"
              placeholder="请选择"
            >
              <el-option
                v-for="item in comparyList"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 城市 -->
          <el-form-item label="城市: ">
            <el-col :span="5">
              <el-form-item prop="province">
                <el-select
                  style="width: 198px"
                  v-model="form.province"
                  placeholder="请选择"
                  @change="provinceOptionsChangeFn"
                >
                  <el-option
                    v-for="(item, index) in provincesList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

              <!-- 城市下地区 -->
            <el-col :span="5">
              <el-form-item prop="city">
                <el-select
                  style="width: 198px; margin-left: -120px"
                  v-model="form.city"
                  collapse-tags
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in citysList"
                    :key="index"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>

          <!-- 方向 -->
          <el-form-item label="方向: " prop="direction">
            <el-select
              style="width: 400px"
              v-model="form.direction"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

          <!-- 题型 -->
          <el-form-item label="题型: " prop="questionType">
            <el-radio-group v-model="form.questionType">
              <el-radio
                v-for="item in questionType"
                :key="item.value"
                :label="String(item.value)"
                @change="
                  form.options.forEach((value) => (value.isRight = false))
                "
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <!-- 难度 -->
          <el-form-item label="难度: " prop="difficulty">
            <el-radio-group v-model="form.difficulty">
              <el-radio
                v-for="item in difficulty"
                :key="item.value"
                :label="String(item.value)"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>

          <!-- 题干 -->
          <el-form-item style="height: 250px" label="题干: " prop="question">
            <!-- 富文本编辑器 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="form.question"
              :options="editorOption"
              @blur="$refs.form.validateField('question')"
            />
          </el-form-item>

          <!-- 选项 -->
          <el-form-item label="选项: " v-if="form.questionType !== '3'">
            <div
              class="radioOrCheckbox-style"
              v-for="(item, index) in form.options"
              :key="index"
            >
              <el-radio
                v-model="item.isRight"
                v-if="form.questionType === '1'"
                :label="true"
                @change="changeRadio(item)"
                >{{ item.code }}:</el-radio
              >
              <el-checkbox v-model="item.isRight" v-else :label="item"
                >{{ item.code }}:</el-checkbox
              >
              <el-input v-model="item.title" style="width: 240px" />

              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                style="margin-left: 5px"
                :on-success="
                  (response, file, fileList) =>
                    handleAvatarSuccess(item, response, file, fileList)
                "
              >
                <img v-if="item.img" :src="item.img" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <i class="el-icon-circle-close" @click="clearImage(item)"></i>
              </el-upload>
            </div>
            <!-- 增加选项与答案按钮 -->
            <el-button
              type="danger"
              :disabled="form.questionType === '1'"
              size="small"
              @click="addCheckboxOptions"
              >+增加选项与答案</el-button
            >
          </el-form-item>

          <!-- 解析视频 -->
          <el-form-item label="解析视频: ">
            <el-input style="width: 400px" v-model="form.videoURL" />
          </el-form-item>

          <!-- 答案解析 -->
          <el-form-item label="答案解析: " style="height: 250px" prop="answer">
            <!-- 富文本 -->
            <quill-editor
              ref="myQuillEditor"
              v-model="form.answer"
              :options="editorOption"
              @blur="$refs.form.validateField('answer')"
            />
          </el-form-item>

          <!-- 题目备注 -->
          <el-form-item label="题目备注: ">
            <el-input type="textarea" v-model="form.remarks"></el-input>
          </el-form-item>

          <!-- 试题标签 -->
          <el-form-item label="试题标签: ">
            <el-select
              style="width: 400px"
              v-model="form.tags"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in tabsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.tagName"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              :type="$route.query.id ? 'success' : 'primary'"
              @click="onSubmit"
              >确认{{ $route.query.id ? "修改" : "提交" }}</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 学科方法
import { simple } from '../../api/hmmm/subjects'

// 企业方法
import { list as getCompanyList } from '../../api/hmmm/companys'

// 导入城市方法
import { provinces, citys } from '../../api/hmmm/citys'

// 导入枚举数据
import { difficulty, questionType, direction } from '../../api/hmmm/constants'

// 目录方法
import { list as getCatalogList } from '../../api/hmmm/directorys'

// 标签方法
import { list as getTabsList } from '../../api/hmmm/tags'

import {
  add,
  detail,
  update as updateQuestion
} from '../../api/hmmm/questions'

// 导入富文本
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 基础题库修改时 回填数据的时候 选项会乱,所以封装一个排序方法
function convertLetters (num) {
  // 最终需要返回的数组
  const newNum = []
  num.forEach((item) => {
    item.code = item.code.charCodeAt()
    newNum.push(item)
    newNum.sort((a, b) => a.code - b.code)
  })
  newNum.forEach((data) => {
    data.code = String.fromCharCode(data.code)
  })
  return newNum
}

export default {
  name: 'QuestionsNew',
  components: { quillEditor },
  data () {
    return {
      // 表单校验数据
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择城市和地区', trigger: 'change' }
        ],
        city: [{ required: true, message: '请选择地区', trigger: 'change' }],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '题干不能为空', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '答案解析不能为空', trigger: 'blur' }
        ]
      },
      // 表单数据
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ], // 选项
        videoURL: 'http://v.itheima.com/zycbrm2.mp4', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },

      // 富文本配置项
      editorOption: {
        placeholder: '', // 富文本编辑器的 占位符设为 ''
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block', 'image', 'link']
          ]
        }
      },
      // 学科列表数组
      subjectIDList: [],
      comparyList: [], // 企业列表数组
      provincesList: [], // 所有城市
      citysList: [], // 所有城市下地区
      directionList: [], // 方向列表
      catalogList: [], // 目录列表
      tabsList: [], // 标签列表数据
      questionType, // 题型
      difficulty // 难度
    }
  },

  // 地址栏改变触发的路由导航钩子
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    if (to.path === '/questions/new') {
      // 将表单清空
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          {
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          { code: 'B', title: '', img: '', isRight: false },
          { code: 'C', title: '', img: '', isRight: false },
          { code: 'D', title: '', img: '', isRight: false }
        ], // 选项
        videoURL: 'http://v.itheima.com/zycbrm2.mp4', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      }
      this.$refs.form.resetFields()
      next()
    }
    next()
  },

  // 侦听器,可以侦听 数据发生改变
  watch: {
    // 如果选择了城市 就调用获取城市下地区的方法
    // 将返回的城市下地区 赋值给 城市下地区方法
    'form.province': {
      // immediate: true, // 立即执行一次
      handler (newVal, oldVal) {
        const cityRes = citys(this.form.province)
        this.citysList = cityRes
      }
    },

    // 如果选择了学科 就调用获取目录的列表
    // 将返回的值 的 subjectID 和学科的 subjectID 相等的值 筛选出来 赋值给目录列表
    'form.subjectID': {
      async handler (newVal, oldVal) {
        const res = await getCatalogList({ page: 1, pagesize: 100 })
        this.catalogList = res.data.items.filter(
          (item) => item.subjectID === this.form.subjectID
        )

        // 如果选择了学科 获取简单标签列表   赋值标签列表方法如上
        const tabsRes = await getTabsList()
        this.tabsList = tabsRes.data.items.filter(
          (item) => item.subjectID === this.form.subjectID
        )
      }
    }
  },

  created () {
    // 调用获取学科列表的方法
    this.simple()
    // 调用获取企业列表的方法
    this.getCompanyList()
    // 调用获取所有城市方法
    this.getCitysList()
    // 调用获取方向方法
    this.getDirection()
    // 调用判断是不是编辑的方法
    this.estimateIsAddOrEdit()
  },

  methods: {
    // 将图片清空的 icon 图标
    clearImage (item) {
      item.img = ''
    },

    // 图片上传成功时的钩子函数
    handleAvatarSuccess (item, res, file, fileList) {
      item.img = URL.createObjectURL(file.raw)
    },

    // 判断当前地址栏路径是否有 id 来判断是不是编辑  ---> 来做编辑数据回填
    async estimateIsAddOrEdit () {
      if (this.$route.query.id) {
        const id = Number(this.$route.query.id)
        // 根据获得的 id 获取基础题库详情
        const { data } = await detail({ id })
        // 根据返回的数据做回填
        this.form = data
        //  将返回的数据做一些特殊处理
        if (data.tags) {
          this.form.tags = data.tags.split(',')
        }
        this.form.options.forEach((item) => {
          item.isRight = Boolean(item.isRight)
        })
        // 对返回选项的 字母 进行排序
        this.form.options = convertLetters(this.form.options)
      }
    },

    // 点击增加选项的方法
    addCheckboxOptions () {
      // 获取选项的最后一个的名称的值
      const value = this.form.options[this.form.options.length - 1].code
      // 将获取到的字母使用 charCodeAt 转换成 数字加 1 然后再 使用 fromCharCode 转换成字母
      const code = String.fromCharCode(value.charCodeAt() + 1)
      // 将转换好的字母 组成新对象,并 push 到 form.options 中
      this.form.options.push({ code, title: '', img: '', isRight: false })
    },

    // 选项的 单选框绑定的值发生改变时触发事件
    changeRadio (item) {
      // 当单选的值发生变化时将表单中绑定的数据的 设为 false
      this.form.options.forEach((item) => {
        item.isRight = false
      })
      // 将选中的选项的值 设为 true
      item.isRight = true
    },

    // 获取方向方法
    getDirection () {
      this.directionList = direction
    },

    // 城市下拉框值发生改变时触发的方法
    provinceOptionsChangeFn () {
      // 手动触发 地区校验
      this.$refs.form.validateField('city')
      // 把地区的值清空
      this.form.city = ''
    },

    // 学科下拉框的值发生改变时触发的方法
    sujectIDChangeFn () {
      // 将 目录 和 试题标签清空
      this.form.catalogID = ''
      this.form.tags = ''
    },

    // 获取所有城市方法 及 城市下地区
    getCitysList () {
      const res = provinces()
      // 将获取的所有城市赋值给 所有城市列表
      this.provincesList = res
    },

    // 获取企业列表的方法
    async getCompanyList () {
      const res = await getCompanyList({ page: 1, pagesize: 100 })
      this.comparyList = res.data.items
    },

    // 获取学科列表的方法
    async simple () {
      const res = await simple()
      this.subjectIDList = res.data
    },

    onSubmit () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return false

        // 如果有标签项就把它转为 字符
        if (this.form.tags) {
          this.form.tags = this.form.tags.join('')
        }

        // 如果地址栏没有 id 就是添加  否则是编辑
        if (!this.$route.query.id) {
          // 发起添加请求
          const res = await add(this.form)
          // 成功提示
          this.$message.success(res.statusText + '已添加成功')
          // 跳转基础图库页面
          this.$router.push('/questions/list')
        } else {
          // 格式化数据
          const data = { id: this.$route.query.id, ...this.form }
          // 发起修改请求
          const res = await updateQuestion(data)
          // 成功提示
          this.$message.success(res.statusText + '已修改成功')
          // 跳转基础图库页面
          this.$router.push('/questions/list')
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-textarea__inner {
  width: 400px;
  height: 97px;
}
::v-deep .el-radio-group {
  width: 100%;
}
::v-deep button.el-button.el-button--danger.el-button--small {
  margin-top: 30px;
}
label.el-radio {
  margin-right: 15px;
}
label.el-checkbox {
  margin-right: 15px;
}
.radioOrCheckbox-style {
  margin-top: 40px;
}
::v-deep .ql-editor.ql-blank {
  height: 190px;
}
::v-deep .ql-editor {
  height: 190px;
}

.avatar-uploader {
  border: 1px dashed #ccc;
  border-radius: 5px;
  display: inline-block;
  height: 64px;
}

::v-deep .avatar-uploader:hover {
  border-color: #409eff;
}

::v-deep .el-upload.el-upload--text {
  height: 60px;
  width: 100px;
  position: relative;
}
i.el-icon-plus.avatar-uploader-icon {
  width: 100px;
  height: 60px;
  line-height: 60px;
}
img.avatar {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}
i.el-icon-circle-close {
  position: absolute;
  top: -12px;
  right: -12px;
  color: #b7b8b7;
  font-size: 16px;
  background-clip: padding-box;
}

</style>
